import React, { useEffect, useState, FC } from 'react'
import { useHistory } from 'react-router-dom'
import { Form, Input, Button, message, Switch, Spin,DatePicker } from 'antd'
import { formItemLayout, wrapperCol } from '@/config/layout'
import { closeTabAction, getQuery } from '@/assets/js/publicFunc'
import MySelect from '@/components/common/mySelect'
// import MyUpload from '@/components/common/myUpload'
const { RangePicker } = DatePicker;
const FormView: FC = () => {
  const query = getQuery()
  const { id } = query

  const [form] = Form.useForm()
  const { setFieldsValue, resetFields } = form

  const [loading, setLoading] = useState<boolean>(false)

  const history: CommonObjectType = useHistory()

  // 编辑状态
  useEffect(() => {
    if (!id) {
      resetFields()
      return
    }
    setFieldsValue({
      name: 'Jacob Jørgensen',
      gender: 'male',
      avatar: 'https://randomuser.me/api/portraits/thumb/men/84.jpg',
      content: 'jacob.jorgensen@example.com',
      status: Math.random() > 0.5
    })
  }, [id, resetFields, setFieldsValue])

  const handleSubmit = () => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
      message.success('修改成功')
      const returnUrl = '/user/list'
      closeTabAction(history, returnUrl)
    }, 1000)
  }

  return (
    <Spin spinning={loading}>
      <Form {...formItemLayout} form={form} onFinish={handleSubmit}>
        <Form.Item
          label="租户名称"
          name="name"
          rules={[
            {
              required: true,
              message: '请输入租户名称'
            }
          ]}
        >
          <Input placeholder="请输入租户名称" />
        </Form.Item>
        <Form.Item
          label="租赁时间"
          name="date"
          rules={[
            {
              required: true,
              message: '租赁时间必选'
            }
          ]}
        >
          <RangePicker />
        </Form.Item>
        <Form.Item
          label="联系电话"
          name="phone"
          rules={[
            {
              required: true,
              message: '请输入联系电话'
            }
          ]}
        >
          <Input placeholder="请输入联系电话" />
        </Form.Item>
        <Form.Item
          label="联系邮箱"
          name="email"
          rules={[
            {
              required: true,
              message: '请输入联系邮箱'
            }
          ]}
        >
          <Input placeholder="请输入联系邮箱" />
        </Form.Item>
        <Form.Item
          label="联系地址"
          name="address"
          rules={[
            {
              required: true,
              message: '请输入联系邮箱'
            }
          ]}
        >
          <Input placeholder="请输入联系邮箱" />
        </Form.Item>
        {/* <Form.Item
          label="头像"
          name="avatar"
          extra={
            <span>
              只支持<b>JPG、PNG、GIF</b>，大小不超过<b>5M</b>
            </span>
          }
        >
          <MyUpload />
        </Form.Item> */}
       
        
        <Form.Item
          label="备注"
          name="remark"
          rules={[
            {
              required: true,
              message: '请输入备注'
            }
          ]}
        >
          <Input.TextArea placeholder="请输入备注" />
        </Form.Item>
        <Form.Item
          label="用户类型"
          name="userType"
        >
          <MySelect
            data={[
              { name: '请选择用户类型', key: '' },
              { name: '平台运营商', key: '1' },
              { name: '企业用户', key: '2' },
              { name: '服务供应商', key: '3' }
            ]}
          />
        </Form.Item>
        <Form.Item label="状态" name="status" valuePropName="checked">
          <Switch checkedChildren="开启" unCheckedChildren="禁用" />
        </Form.Item>
        <Form.Item wrapperCol={wrapperCol}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </Spin>
  )
}

export default FormView
